<template>
  <div>
    <el-dialog :title="edit.textMap[edit.status]" :visible.sync="edit.visible" width="500px" @close="closeDialog(0)">
      <el-form ref="dataForm" :rules="edit.rules" :model="edit.temp" label-position="left" label-width="100px">
        <el-form-item label="组名:" prop="group_name" class="label-group label-name">
          <el-input v-model="edit.temp.group_name" class="input-countent group-name" />
        </el-form-item>
        <el-form-item label="备注:" prop="mark" class="label-name remark">
          <el-input
            v-model="edit.temp.mark"
            :autosize="{ minRows: 4, maxRows: 8}"
            type="textarea"
            placeholder="输入备注"
            class="input-countent"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="foot-button" size="medium" @click="closeDialog(0)">
          取消
        </el-button>
        <el-button type="primary" class="foot-button" size="medium" @click="updateOrAddData()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { editMachineGroup } from '@/api/machine-group'

export default {
  name: 'MachineGroupDialog',
  props: {
    dialogTitle: {
      type: String,
      default: '添加人员'
    },
    groupTableItem: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      edit: {
        visible: false,
        status: '',
        textMap: {
          update: '编辑组别信息',
          create: '新增组别信息'
        },
        temp: {
          id: undefined,
          group_name: '',
          mark: ''
        },
        rules: {
          group_name: [{ required: true, message: '请输入组名', trigger: 'change' }]
        }
      },
      dataForm: JSON.parse(JSON.stringify(this.groupTableItem))
    }
  },
  created() {
  },
  mounted() {
    this.edit.visible = true
    this.edit.temp = {
      id: this.groupTableItem.id,
      group_name: this.groupTableItem.group_name,
      mark: this.groupTableItem.mark
    }
    this.edit.status = this.groupTableItem.status
  },
  methods: {
    // 关闭弹框
    closeDialog(flag) {
      this.$refs['dataForm'].resetFields()
      this.showDialog = false
      this.$emit('closeDialog', flag)
    },
    // 编辑执行组信息
    updateOrAddData() {
      this.status = 'update'
      this.$refs.dataForm.validate((validate) => {
        if (validate) {
          editMachineGroup(this.edit.temp).then(response => {
            this.$message.success((this.status === 'update' ? '更新' : '新增') + '成功')
            this.edit.visible = false
            this.closeDialog(1)
          })
        }
      })
    }
  }

}
</script>

<style scoped>
  .remark>[for='mark']{
    padding-left: 10px;
  }

  .dialog-footer{
    padding-left: 60%;
  }
  .foot-button{
    margin-left: 10px;
    margin-right: 2%;
  }
</style>
